<template>
  <div class="captureImg">
    <div class="left">
      <div class="time">
        <div class="title">选择时间</div>
        <div class="block">
      <el-date-picker
        v-model="selectionTime"
        type="date"
        placeholder="请选择时间"
        :size="size"
      />
    </div>
      </div>
      <ul>
        <el-scrollbar style="height: 600px">
          <li
            v-for="(item, index) in imgList"
            :key="index"
            @click="onToggle(item, index)"
            :class="{ active: activeIndex === index }"
          >
            <div class="view">
              <img src="@/assets/demo1.png" alt="" />
            </div>
            <div class="content">
              <div class="name">{{ item.name }}</div>
              <div class="time">{{ item.time }}</div>
            </div>
          </li>
        </el-scrollbar>
      </ul>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="2"
      height="788"
      viewBox="0 0 2 788"
      fill="none"
    >
      <path
        d="M1 1L1.00003 787"
        stroke="url(#paint0_linear_60_3172)"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-dasharray="2 9"
      />
      <defs>
        <linearGradient
          id="paint0_linear_60_3172"
          x1="0.5"
          y1="1"
          x2="0.500034"
          y2="787"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#737373" stop-opacity="0.7" />
          <stop offset="0.519873" stop-color="#D9D9D9" />
          <stop offset="1" stop-color="#737373" stop-opacity="0" />
        </linearGradient>
      </defs>
    </svg>
    <div class="right">
      <div class="content">
        <div class="name">经皮静脉内滤网置入术</div>
        <div class="time">2024-07-02 12:17</div>
      </div>
      <img src="@/assets/demo2.png" alt="" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
const selectionTime = ref("");

const imgList = ref([
  { id: 1, name: "经皮静脉内滤网置入术", time: "2024-07-02 12:17" },
  { id: 2, name: "骨折内固定术", time: "2024-07-02 12:17" },
  { id: 3, name: "胆囊切除术", time: "2024-07-02 12:17" },
  { id: 3, name: "脓肿切开引流术", time: "2024-07-02 12:17" },
  { id: 4, name: "外伤后清创缝合手术", time: "2024-07-02 12:17" },
  { id: 5, name: "阑尾切除术", time: "2024-07-02 12:17" },
  { id: 6, name: "临时起搏器植入术", time: "2024-07-02 12:17" },
  { id: 7, name: "经皮动脉支架置入术", time: "2024-07-02 12:17" },
  { id: 8, name: "经皮心内膜心肌活检术", time: "2024-07-02 12:17" },
]);

const activeIndex = ref(0);
const onToggle = (item, index) => {
  activeIndex.value = index;
};
</script>
<style scoped lang="scss">
.captureImg {
  padding: 20px;
  display: flex;
  .left {
    width: 28%;
    margin-right: 50px;
    .time {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .title {
        color: #fff;
        /* Title/Large */
        font-family: "Microsoft YaHei";
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        width: 100px;
        line-height: 26px; /* 144.444% */
      }
    }
    ul {
      li {
        display: flex;
        height: 120px;
        align-items: center;
        padding: 0px 16px;
        img {
          width: 160px;
          height: 90px;
          flex-shrink: 0;
          margin-right: 10px;
        }
        .content {
          .name {
            color: #fff;
            /* Title/Large */
            font-family: "Microsoft YaHei";
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 26px; /* 144.444% */
          }
          .time {
            color: #fff;
            font-family: "Microsoft YaHei";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22px; /* 157.143% */
          }
        }
      }
      .active {
        border-radius: 10px;
        background: linear-gradient(
          90deg,
          rgba(70, 255, 211, 0.2) 0%,
          rgba(0, 255, 240, 0) 100%
        );
      }
    }
  }
  .right {
    width: 72%;
    margin-left: 10px;
    .content {
      display: flex;
      align-items: center;
      .name {
        color: #fff;
        /* Title/Large */
        font-family: "Microsoft YaHei";
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px; /* 144.444% */
        margin-right: 10px;
      }
      .time {
        color: #fff;
        /* Body/Medium */
        font-family: "Microsoft YaHei";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
      }
    }
    img {
      width: 100%;
    }
  }
  :deep(.el-select--large .el-select__wrapper) {
    border-radius: 3px;
    border: 1px solid rgba(220, 220, 220, 0.25);
    background: rgba(255, 255, 255, 0.19);
  }
  :deep(.el-input__wrapper) {
    background: none;
    border: none;
  }
  :deep(.el-input__inner) {
    border: none !important; /* 去掉默认边框 */
  }
  :deep(.el-input__inner::placeholder) {
    color: #fff;
  }
  .custom-range:focus {
    outline: none; /* 去掉聚焦时的边框 */
  }
  
}
</style>









